<template>
    <div style="min-width: 809px">
        <div v-if="$route.path == '/projectList'">
            <div class="vs-search-box">
                <div class="vs-table-box">
                    <el-form ref="form" :inline="true" :model="paging">
                        <el-form-item label="项目名称：">
                            <el-input placeholder="请输入项目名称" v-model="paging.title" clearable
                                @keyup.enter.native="handleCurrentChange(1)">
                                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                <!-- <template slot="append" @click="handleCurrentChange(1)">查询</template> -->
                            </el-input>
                        </el-form-item>
                        <el-form-item class="vs-right-btns">
                            <el-button @click="reset(1)">重置</el-button>
                            <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                        </el-form-item>
                    </el-form>

                </div>
            </div>
            <div class="vs-table-box">
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table"
                    style="width: 100%" border :key="0">
                    <el-table-column prop="id" label="序号" width="50" align="center"> </el-table-column>
                    <el-table-column prop="number" label="项目编码" align="center"> </el-table-column>
                    <el-table-column label="项目图片" align="center">
                        <template slot-scope="scope">
                            <el-image class="vs-image-table" style="margin-right:10px"
                                v-for="(item, index) in scope.row.list" :key="index" :src="item" fit="cover"
                                :preview-src-list="scope.row.list"> </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="项目名称" align="center"> </el-table-column>
                    <el-table-column prop="desc" label="项目描述" align="center"> </el-table-column>
                    <el-table-column prop="price" label="金额" align="center"> </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="paging.page" :page-size="paging.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="paging.total"
                        :page-sizes="[100, 200, 500, 1000]">
                    </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            paging: {
                title: '',
                page: 0,
                limit: 100,
                total: 0,
            },
            tableData: []
        };
    },
    async created() {
        if (this.$route.path == '/projectList') {
            this.handleCurrentChange(1);
        }
    },
    methods: {
        reset() { //重置
            this.paging = this.$options.data().paging;
            this.handleCurrentChange(1)
        },
        async repairGetList() {
            let obj = Object.assign({}, this.paging);
            this.loading = true;
            let { code, data } = await this.$Http.getProject(obj);
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total;
                for (let o of this.tableData) {
                    this.$set(o, 'list', o.img.split(','))
                }
            }
            this.loading = false;
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList()
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList()
        }
    },
};
</script>

<style lang="scss" scoped>

</style>
